<style>
  .article-product {
    width: 100%;
    margin: 0 auto;
    padding: 0;
  }

  .article-product img {
    width: 100%;
  }

  .article-product-info {
    padding: 10px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .article-product-info-left {
    display: inline-block;
    margin-left: 2%;
    padding-left: 2%;
    font-size: 18px;
    color: red;
    font-weight: bold;
    border-left: 3px solid #9E9E9E;
  }

  .article-product-info-right {
    display: inline-block;
    padding-right: 4%;
  }

  .article-product-info-right button {
      background-color: transparent !important;
      color: #04be02 !important;
      border: 1px solid #04be02 !important;
      background-image: none !important;
  }

</style>

<template>
  <div class="article-product">
    <img :src="product.img" />
    <div class="article-product-info">
      <span class="article-product-info-left">￥{{product.price}}</span>
        <span class="article-product-info-right">
            <x-button type='primary' plain text="加入购物车" mini @click="shopping_cart">
            </x-button>
        </span>
    </div>

  </div>
</template>

<script>

  import XButton from 'vux-components/X-button'
  var $ = require('jquery');


  export default {
    props: ['item'],
    data: () => ({product: {img: '', price: ''}}),
    components: {
        XButton
    },
    events: {
        'text-input-change': function() {
            this.refresh_product();
        }
    },
    methods: {
        shopping_cart () {
            // alert('开发中....');
        },

        refresh_product () {
            let model_id;
            if (this.item.record && this.item.record.model_id > 0) {
                model_id = this.item.record.model_id;
            } else if (this.item.value) {
                model_id = JSON.parse(this.item.value).model_id;
            } else {
                return;
            }

            $.when($.get('/editor/product/get_desc', {product_id: model_id})).then((results) => {
                this.product = JSON.parse(results);
            })
        },
    },
    ready() {
        this.refresh_product();
    },
  }

</script>
